<template>
  <s-layout title="会员卡中心" navbar="inner" :bgStyle="{ color: '#252525' }">
    <view class="member-box">
      <view class="member-card">
        <image
          class="member-card-image"
          src="/static/member-card.png"
          mode="scaleToFill"
        />
        <view class="title">{{ state.goodsInfo.title }}</view>
        <view class="remark">{{ state.goodsInfo.subtitle }}</view>
        <view class="limit">{{ state.goodsInfo.limit }}</view>
      </view>
      <view class="buy-btn" v-if="state.goodsInfo.price.length > 0" @tap="onBuy">
        立即购买
      </view>
      <label class="radio ss-flex ss-col-center" @tap="onChange">
        <radio
          :checked="state.protocol"
          color="var(--ui-BG-Main)"
          style="transform: scale(0.8)"
          @tap.stop="onChange"
        />
        <view class="agreement-text ss-flex ss-col-center ss-m-l-8">
          授权即表示同意
          <view
            class="tcp-text"
            @tap.stop="onProtocol(appInfo.user_protocol.id, appInfo.user_protocol.title)"
          >
            《用户服务协议》
          </view>
          <view
            class="tcp-text"
            @tap.stop="
              onProtocol(appInfo.privacy_protocol.id, appInfo.privacy_protocol.title)
            "
          >
            《{{ appInfo.privacy_protocol.title }}》
          </view>
        </view>
      </label>
      <view class="equity-box">
        <view class="equity-title">
          <view class="before" />
          <view class="middle">会员权益</view>
          <view class="after" />
        </view>
        <view class="equity-text" v-for="(item, index) in state.equity" :key="index">
          {{ item }}
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
import sheep from "@/sheep";
import { computed, reactive } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import dayjs from "dayjs";

const appInfo = computed(() => sheep.$store("app").info);

// 用户信息
const userInfo = computed(() => sheep.$store("user").userInfo);

const state = reactive({
  goodsInfo: {}, // 会员卡信息
  protocol: false, // 勾选协议
  // equity: [
  //   "1、普通用户或会员满足条件后可提交加盟资料成为经销商",
  //   "2、成为经销商可以获得更高复购折扣，以及平台奖励",
  //   "3、成为经销商的方式分别为：团队销售额达标、直充进货、邀好友参与拼团；所有成为经销商方式会员和普通用户都可以参与",
  //   "4、用户可提前提交加盟资料审核，达到加盟要求时，自动升级",
  // ],
  equity: [
    "1、720 个鸡蛋，一个月发货两次，每次三十个。",
    "2、过年送一只鸡。",
    "3、推荐一个鸡蛋会员，奖励 200 元(一级分销)。",
    "4、间推(第二层人数超过 100 人(鸡蛋会员)，有额外的奖励，线下发放)超过 100 人",
  ],
});

// 立即购买
function onBuy() {
  if (!state.protocol) {
    sheep.$helper.toast("请先阅读并勾选协议");
    return;
  }
  sheep.$api.order
    .buyEggMember({
      order_type: "goods",
      goods_list: [
        {
          goods_id: 1, //固定参数
          goods_sku_price_id: 1, //固定参数
        },
      ],
    })
    .then((res) => {
      if (res.code === 1) {
        uni.setStorageSync('egg_vip_buy', 1)
        sheep.$router.redirect("/pages/pay/index", {
          orderSN: res.data.order_sn,
        });
      }
    });
}

//勾选协议
function onChange() {
  state.protocol = !state.protocol;
}

// 查看协议
function onProtocol(id, title) {
  sheep.$router.go("/pages/public/richtext", {
    id,
    title,
  });
}

// 获取会员卡信息
function getData() {
  sheep.$api.goods.detail(1).then((res) => {
    if (res.code === 1) {
      let row = res.data;
      let time = userInfo.value.egg_vip
        ? new Date(userInfo.value.egg_vip_end_time)
        : new Date();
      time.setFullYear(time.getFullYear() + 1);
      row.limit = dayjs(time).format("YYYY-MM-DD HH:mm:ss");
      state.goodsInfo = row;
    }
  });
}
onLoad(() => {
  getData();
});
</script>

<style lang="scss" scoped>
.member-box {
  padding: 40rpx;
  .member-card {
    width: 100%;
    height: 288rpx;
    overflow: hidden;
    border-radius: 20rpx;
    position: relative;
    line-height: 44rpx;
    font-family: Inter;
    &-image {
      width: 100%;
      height: 100%;
    }
    .title {
      position: absolute;
      top: 50rpx;
      left: 40rpx;
      color: #663409;
      font-size: 44rpx;
      font-weight: 900;
    }
    .remark {
      position: absolute;
      top: 114rpx;
      left: 40rpx;
      color: #663409;
      font-size: 28rpx;
    }
    .limit {
      position: absolute;
      bottom: 30rpx;
      left: 40rpx;
      color: #fff;
      font-size: 24rpx;
    }
  }
  .buy-btn {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    background-color: #ffebaf;
    color: #252525;
    font-size: 28rpx;
    font-weight: 500;
    border-radius: 20rpx;
    margin: 40rpx 0 20rpx 0;
  }
  .agreement-text {
    font-size: 24rpx;
    color: #979797;
  }
  .tcp-text {
    color: #fff;
  }
  .equity-box {
    margin-top: 160rpx;
    .equity-title {
      color: #fff;
      font-size: 28rpx;
      line-height: 44rpx;
      display: flex;
      align-items: center;
      .middle {
        margin: auto 30rpx;
      }
      .before,
      .after {
        position: relative;
        flex: 1;
        height: 4rpx;
        background-color: #bababa;
      }
      .before::after {
        content: "";
        position: absolute;
        right: 0;
        top: -50%;
        width: 10rpx;
        height: 10rpx;
        border-radius: 50%;
        background-color: #fff;
      }
      .after::before {
        content: "";
        position: absolute;
        left: 0;
        top: -50%;
        width: 10rpx;
        height: 10rpx;
        border-radius: 50%;
        background-color: #fff;
      }
    }
    .equity-text {
      color: #979797;
      font-size: 24rpx;
      line-height: 60rpx;
    }
  }
}
</style>
